<template>
	<div
		class="goods"
		:style="{
			backgroundColor: facade.background_color
		}"
	>
		<div
			class="goods-layout"
			:style="{
				paddingLeft: facade.padding + 'px',
				paddingRight: facade.padding + 'px',
				marginLeft: -facade.margin / 2 + 'px',
				marginRight: -facade.margin / 2 + 'px'
			}"
			:class="{
				larger: facade.list_style == 1,
				small: facade.list_style == 2 || facade.list_style == 5,
				list: facade.list_style == 3,
				swipe: facade.list_style == 4,
                verCard:facade.list_style == 6
			}"
		>
			<div
				class="goods-wrapper"
				:class="{
					white: facade.card_style == 1,
					card: facade.card_style == 2,
					stroke: facade.card_style == 3,
					lucency: facade.card_style == 4,
					chamfer: facade.chamfer_style
				}"
				v-for="(item, index) in contentData"
				:key="index"
			>
				<div
					class="goods-item"
					:style="{
						margin: facade.margin / 2 + 'px',
                        borderRadius:facade.radius + 'px'
					}"
				>
					<div class="goods-item-photo">
						<div class="goods-item-image">
							<div class="goods-item-cover">
								<el-image
									style="width: 100%; height: 100%"
									:src="getGoodsCover(item)"
								></el-image>
							</div>
						</div>
					</div>
					<div class="goods-item-detail" v-if="is_hide">
						<div class="goods-item-title" v-if="content.is_title">
							{{ item.title }}
						</div>
						<div class="goods-item-info">
							<div class="goods-item-price">
								<div v-if="content.is_price">
									<template v-if="content.type == 3">
										<span class="goods-item-price__val">{{
											item.nickname || "朝气"
										}}</span>
									</template>
									<template v-else>
										<span class="goods-item-price__tag">¥</span>
										<span class="goods-item-price__val">{{
											item.minPrice
										}}</span>
									</template>
								</div>
							</div>
							<div class="goods-item-button" v-if="content.is_button">
								<i v-if="content.type == 3" class="le-icon le-icon-star-gray">{{
									item.count_love
								}}</i>
								<i v-else class="le-icon le-icon-nav_shoppingcart_normal"></i>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="clear"></div>
		</div>
	</div>
</template>
<script type="text/javascript">
import template from "/$/goods/views/template.vue";
// import empty from './empty.vue'
import store from "/@/store";

export default {
	components: { template },
	props: {
		facade: {
			type: [Object, Array]
		},
		content: {
			type: [Object, Array]
		}
	},
	data() {
		return {
			goods: [
				{
					id: 1,
					title: "商品名称",
					cover: "cover",
					minPrice: 999
				},
				{
					id: 1,
					title: "商品名称",
					cover: "cover",
					minPrice: 999
				},
				{
					id: 1,
					title: "商品名称",
					cover: "cover",
					minPrice: 999
				},
				{
					id: 1,
					title: "商品名称",
					cover: "cover",
					minPrice: 999
				},
				{
					id: 1,
					title: "商品名称",
					cover: "cover",
					minPrice: 999
				}
			],
			goodsData: [],
			weibo: [
				{
					id: 1,
					title: "原创名称",
					nickname: "朝气管理员",
					cover: "cover",
					love: 999
				},
				{
					id: 1,
					nickname: "朝气管理员",
					title: "原创名称",
					cover: "cover",
					love: 999
				},
				{
					id: 1,
					nickname: "朝气管理员",
					title: "原创名称",
					cover: "cover",
					love: 999
				},
				{
					id: 1,
					nickname: "朝气管理员",
					title: "原创名称",
					cover: "cover",
					love: 999
				},
				{
					id: 1,
					nickname: "朝气管理员",
					title: "原创名称",
					cover: "cover",
					love: 999
				}
			],
			weiboData: []
		};
	},
	/**
	 * 计算属性
	 * @type {Object}
	 */
	computed: {
		is_hide() {
			if (this.facade.list_style !== 3) {
				if (!this.content.is_title && !this.content.is_price && !this.content.is_button) {
					return false;
				} else {
					return true;
				}
			} else {
				return true;
			}
		},
        contentData(){
            if(this.facade.list_style !== 6){
                return  this.content.type == 3 ? this.weiboData : this.goodsData
            }else{
                return  this.content.type == 3 ? this.weiboData.splice(0,1) : this.goodsData.splice(0,1)
            }
        }
	},
	/**
	 * 数据监听
	 * @type {Object}
	 */
	watch: {
		content: {
			deep: true,
			handler: function (newV, oldV) {
				this.handleCheck();
			}
		}
	},
	/**
	 * 页面加载执行
	 * @return {[type]} [description]
	 */
	async mounted() {
		this.handleCheck();
	},
	methods: {
		handleCheck() {
			if (this.content.type == 1 && this.content.goods && this.content.goods.length > 0) {
				this.goodsData = this.content.goods;
			} else if (this.content.type == 2) {
				this.handleGroupList(this.content.group);
				this.goodsData = this.goods;
			} else if (this.content.type == 3) {
				if (this.content.weibo && this.content.weibo.length) {
					this.weiboData = this.content.weibo;
				} else {
					this.weiboData = this.weibo;
				}
			} else {
				this.goodsData = this.goods;
			}
		},
		/**
		 * 获取封面信息
		 * @param  {[type]} cover [description]
		 * @return {[type]}       [description]
		 */
		getGoodsCover(item) {
			let cover = item.pic || item.pics;
			console.log(cover, "cover");
			if (cover) {
				return cover;
			}
			return "/images/shark/le-default-goods-bg.png";
		},
		/**
		 * 加载数据信息
		 * @return {[type]} [description]
		 */
		handleGroupList({ id, limit }) {
			if (id) {
				store.service.goods.info
					.search({ categoryIds: id, size: limit })
					.then(({ list }) => {
						console.log(list, "----?");
						if (list.length > 0) {
							this.goodsData = list;
						} else {
							this.goodsData = this.goods;
						}
					})
					.catch((error) => {
						console.error("获取错误信息", error);
					});
			}
		}
	}
};
</script>
<style lang="less" scoped>
@import "./element.less";
</style>
